<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>rem适配方案二</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#demo{
				width: 9rem;
				height: 4rem;
				background-color: #8FAADC;
				margin: 0 auto;
				margin-top: 0.5rem;
			}
		</style>
	</head>
	<body>
		<div id="demo"></div>
		<script type="text/javascript" >
			//根字体 = 设备横向独立像素值 / 10
			function adapter (){
				//获取当前手机横向设备独立像素值
				const dip = document.documentElement.clientWidth 
				//计算根字体大小
				const rootFontSize = dip / 10
				//设置根字体大小
				document.documentElement.style.fontSize = rootFontSize+'px'
			}
			adapter()
			//监测布局视口改变，进行实时适配
			window.onresize = adapter

		</script>
	</body>
</html>